<template>
  <div class="comment">
    <textarea placeholder="请输入文字..." maxlength="500" v-model="commentCon"></textarea>
    <div class="residue">{{number}}/500</div>
    <div class="publish-btn">发布</div>
  </div>
</template>
<script>
export default {
    watch:{
        commentCon(val) {
            this.number = val.length
        }
    },
  data() {
    return {
      number: 0,
      commentCon:''
    }
  }
};
</script>

<style lang="scss" scoped>
.comment {
  background: #fff;
  padding-bottom: 0.26rem;
  textarea {
    border: 0;

    padding: 0.2rem;
    min-height: 4.8rem;
    width: 100%;
    font-size: 0.24rem;
  }
  .residue {
    color: #ccc;
    font-size: 0.24rem;
    text-align: right;
    padding-right: 0.5rem;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0.26rem;
  }
  .publish-btn {
    width: 80%;
    height: 1rem;
    background: #ff6422;
    font-size: 0.32rem;
    line-height: 1rem;
    text-align: center;
    color: #fff;
    margin: 0.26rem auto 0 auto;
    border-radius: 0.5rem;
    letter-spacing: 3px;
    &:active {
      background: #d04a11;
    }
  }
}
</style>

